<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 单位工程预验收记录 -->
    <div id="base-breadcrumb" style="position: relative; overflow: hidden">
      <!-- 搜索 -->
      <searchData :searchData="searchArr" @search="search"></searchData>
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <div class="mb12">
          <a-button icon="plus" class="btn_right" type="primary" @click="handleManage(2)">添加记录</a-button>
          <!-- <a-button icon="import" class="btn_right" type="primary">导入</a-button> -->
          <excel ref="exportAll" fileName="单位工程预验收记录" is-click-generate="false">
            <a-button slot="excelBtn" type="primary" icon="export" @click="exportAll">导出全部</a-button>
          </excel>
          <excel ref="exportSelect" fileName="单位工程预验收记录" is-click-generate="false">
            <a-button
              type="primary"
              icon="export"
              :disabled="selectedRowKeys.length < 1"
              slot="excelBtn"
              @click="exportSelect"
              >导出选中</a-button
            >
          </excel>
        </div>
        <list-table
          ref="table"
          tableLayout="fixed"
          size="default"
          rowKey="id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="operation" slot-scope="text, record">
            <template>
              <a @click="handleManage(0, record)">查看</a>
              <template v-if="record.statusCode === '0' || record.statusCode === '3'">
                <a-divider type="vertical"></a-divider>
                <a @click="handleManage(1, record)">编辑</a>
              </template>
            </template>
          </span>
          <a-list
            slot="expandedRowRender"
            slot-scope="record"
            item-layout="horizontal"
            :data-source="record.preAcceptanceList"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-row type="flex" justify="space-between" style="width: 50%">
                <a-col :span="6">
                  部位：<ellipsis :length="20" tooltip>{{ item.part }}</ellipsis>
                </a-col>
                <a-col :span="6">
                  问题：<ellipsis :length="20" tooltip>{{ item.problem }}</ellipsis>
                </a-col>
                <a-col :span="6">
                  类别：<ellipsis :length="20" tooltip>{{ item.typeName }}</ellipsis>
                </a-col>
              </a-row>
            </a-list-item>
          </a-list>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components' // 表格
import { record } from '@/api/quality/unitProject' // api
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称

const searchArr = [
  // 搜索框
  {
    name: '分公司',
    type: SelectSubCompany,
    valueKey: 'branchCompanyId',
  },
  // {
  //   name: '项目名称',
  //   type: SelectProject,
  //   valueKey: 'projectId',
  // },
  {
    name: '预验收时间',
    type: 'timeRange',
    value: 'time',
  },
  {
    name: '工程名称',
    type: 'input',
    value: 'name',
  },
]
const columns = [
  {
    title: '分公司',
    ellipsis: true,
    dataIndex: 'branchCompanyName',
  },
  {
    title: '项目',
    ellipsis: true,
    dataIndex: 'projectName',
  },
  {
    title: '单位工程名称',
    ellipsis: true,
    dataIndex: 'name',
  },
  {
    title: '结果',
    dataIndex: 'isQualifiedName',
  },
  {
    title: '预验收时间',
    dataIndex: 'acceptanceDate',
  },
  {
    title: '状态',
    dataIndex: 'statusName',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '150px',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    Ellipsis,
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let createTime = this.queryParam.createTime
        if (createTime) {
          this.queryParam.createTimeStart = this.formatDate(createTime[0])
          this.queryParam.createTimeEnd = this.formatDate(createTime[1])
        }
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return record.getList(requestParameters).then((res) => {
          if (res.code === 200) {
            return res
          }
        })
      },
      editModel: 0,
      form: {},
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  mounted() {
    this.$refs.exportSelect.tableToExcelFile(this.$refs.table, 0)
    this.$refs.exportAll.tableToExcelFile(this.$refs.table, 0)
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 导出选中
    exportSelect: function () {
      if (this.selectedRowKeys.length > 0) {
        this.$refs.exportSelect.setDataAndGenerate(this.selectedRows)
      } else {
        this.$message.warning('请选择需要导出的数据')
      }
    },
    // 导出全部
    exportAll() {
      // 参数：查询条件、导出的回调
      this.list(this.queryParam, this.$refs.exportAll.setDataAndGenerate)
    },
    list(params, callback) {
      let _this = this
      record.getAll(params).then((res) => {
        if (res.code === 200) {
          if (callback) {
            if (res.data.length > 0) {
              callback(res.data)
            } else {
              _this.$message.warning('没有可导出的数据')
            }
            return
          }
          // _this.tableData = res.data
          // _this.totalSize = res.totalSize
        }
      })
    },
    // 搜索
    search(value) {
      value && (this.queryParam = value)
      this.selectedRowKeys.length > 0 && this.$refs.table.clearSelected()
      this.$refs.table.refresh(true)
    },
    // 操作栏
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type,
      }
      if (record && record.id) {
        query.id = record.id
      }
      this.$router.push({
        name: '/quality/preAcceptanceManagement/preAcceptanceRecord/preAcceptanceRecordEdit',
        query,
      })
    },
  },
}
</script>
